<template>
    <div class="goodsinfo-container">
      <transition @before-enter="beforeenter" @enter="enter" @after-enter="afterEnter">
     <!-- <div :class="{'ball':flag}" ></div> -->
    <div class="ball" v-show="flag" ref="ballobj"></div>
</transition>
       <!-- 商品轮播 -->
<div class="mui-card">
    <swiper :lunbotu="goodsinfoarr" :isfull="true"></swiper>
			</div>



       <!-- 商品购买 -->
            <div class="mui-card">




				<div class="mui-card-header">商品的名称标题</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <p>
                                   
                            市场价:    <del>￥2399</del>    &nbsp;&nbsp;销售件: <span class="now_price">￥2199</span>
                             </p>
                             <p>购买数量:
                                  <numberbox @getnumcount="getcount" :max="goodscanshuarr.bb"> </numberbox> 
                             </p>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small"  @click="ballflag">加入购物车</mt-button>
                       
					</div>
				</div>
			</div>

       <!-- 商品参数 -->
<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					<p>商品货号:{{goodscanshuarr.data_id}}</p>
					<p>库存情况:{{goodscanshuarr.bb}}</p>
					<p>上架时间:{{goodscanshuarr.ctime | dataformat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
<mt-button type="primary" plain size="large" @click="gosuggest(id)" >商品介绍</mt-button>
<mt-button type="danger" plain size="large"  @click="gocomment(id)">商品评论</mt-button>
        </div>
			</div>

    </div>
</template>

<script>
import swiper from "../swiper/swiper.vue";
import numberbox from "../subinfo/numberbox.vue";
export default {
  data() {
    return {
      goodscount: 1,
      goodsinfoarr: [],
      goodscanshuarr: {},
      id: this.$route.params.id,
      flag: false,
    };
  },

  created() {
    this.getgoodsinfo();
    this.getgoodscanshu();
    this.getcount();
  },

  methods: {
 

    getcount(count) {
      //从子组件传回来的值
      count === undefined ?1: (this.goodscount = count);
    },

    beforeenter(el) {
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      el.offsetWidth;
      //getBoundingClientRect()用这个获取 DOM对象的left top  right  buttom;
      const ballposition = this.$refs.ballobj.getBoundingClientRect();
      const muiBadgepisition = document
        .querySelector(".mui-badge")
        .getBoundingClientRect();
      const dvalueX = muiBadgepisition.left - ballposition.left;
      const dvalueY = muiBadgepisition.top - ballposition.top;
      el.style.transform = `translate(${dvalueX}px, ${dvalueY}px)`;
      el.style.transition = "all 0.6s cubic-bezier(.36,-0.27,.42,.78)";
      done();
      
    },
    afterEnter(el) {
      this.flag = !this.flag;
      
    },

    gosuggest(id) {
      this.$router.push({ name: "goodssuggest", params: { id } });
    },
    gocomment(id) {
      this.$router.push({ name: "goodscomment", params: { id } });
    },

    getgoodsinfo() {
      this.$http
        .get("https://www.apiopen.top/meituApi?page=" + this.id)
        .then(res => {
          this.goodsinfoarr = res.body.data.splice(0, 3);
        });
    },


//把数据共享给main.js的car
   ballflag() {
        this.flag = !this.flag;
      var byinfo = {
        id: parseInt(this.id),
        count: this.goodscount,
        price: this.goodscanshuarr.bb,
        selected: true
      };
      //调用全局的mutation来江商品加入
      this.$store.commit("addTocar", byinfo);
     
    },

    getgoodscanshu() {
      this.$http
        .get(
          "https://www.apiopen.top/satinCommentApi?id=27610708&page=" + this.id
        )
        .then(res => {
          this.goodscanshuarr = res.body.data.normal.list[0];
          var bb =this.goodscanshuarr.id.toString().substr(1,3)?this.goodscanshuarr.id.toString().substr(1, 3):0;
          this.goodscanshuarr.bb = bb;
        });
    }
  },
  components: {
    swiper,
    numberbox
  }
};
</script>

<style lang="less">
.goodsinfo-container {
  margin-bottom: 60px;

  .mint-button {
    margin-bottom: 15px;
  }
  .mui-card-header,
  .mui-card-footer {
    display: block;
  }
}

.now_price {
  color: red;
  font-size: 16px;
  font-weight: 400;
}

.goodsinfo-container {
  background-color: #ccc;
  overflow: hidden;
}

.ball {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  left: 140px;
  top: 320px;
  z-index: 99;
}
</style>
